<template>
  <el-dialog :model-value="props.visible" :title="props.title" width="800px" align-center destroy-on-close @close="onClose">
    <template #header="{ titleId }">
      <span :id="titleId" class="title" v-html="props.title" />
    </template>
    <div class="main-container">
      <div class="tips">该资源已引用以下内容引用，若要删除，请先解绑关系。</div>
      <el-table :data="questionCiteList">
        <el-table-column label="名称">
          <template #default="scope">{{ scope.row.resourceName }}</template>
        </el-table-column>
        <el-table-column label="类型" width="100">
          <template #default="scope">
            <enum-view :enum-name="'CiteResourceType'" :enum-value="scope.row.citeResourceType" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" @click="toResource(scope.row)">前往查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button @click="onClose()">取消</el-button>
      <el-button type="primary" @click="onRefresh()">刷新</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { questionApi } from '@/api/question'
  import EnumView from '@/components/Enum/View/index.vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const props = defineProps({
    questionId: {
      type: String,
      default: ''
    },
    paperId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    }
  })

  // 查看资源
  const toResource = (item) => {
    if (item.citeResourceType === 1) {
      window.open(router.resolve({ path: '/paper/compose', query: { paperId: item.resourceId } }).href, '_blank')
    }
    if (item.citeResourceType === 2) {
      window.open(router.resolve({ path: '/exam/update', query: { examId: item.resourceId } }).href, '_blank')
    }
  }

  // 试题引用列表
  const questionCiteList = ref([])
  onMounted(async () => {
    await onRefresh()
  })

  // 刷新
  const onRefresh = async () => {
    if (props.questionId) {
      questionCiteList.value = await questionApi.questionCiteList({ id: props.questionId })
    }
    if (props.paperId) {
      questionCiteList.value = await questionApi.paperCiteList({ id: props.paperId })
    }
  }

  // 关闭弹窗
  const emit = defineEmits(['close'])
  const onClose = () => {
    emit('close')
  }
</script>
<style lang="scss" scoped>
  .main-container {
    height: 50vh !important;
  }

  .title {
    :deep(p) {
      margin: 0;
    }
  }
</style>
